<template>
	<view class="bankcardRe">
		<view class="bankcardRe-wrapper">
			<view class="bc-company">
				<view class="bc-bg">
					<view class="bc-title" style="position: relative;">
						<image src="../../../static/images/dianbao.png" style="width: 28px;height: 28px;vertical-align: bottom;"></image><text
						 style="padding-left: 8px;">{{card_name}}</text>
						 <view class="bc-copy" @click="pasteName(card_name)" style="top:20upx">
						 	<text>复制</text>
						 </view>
					</view>
					<view class="bc-number">
						{{card_no}}
						<view class="bc-copy" @click="paste(card_no)">
							<text>复制</text>
						</view>
					</view>
					<view class="bc-address">{{card_subbranch}}</view>
				</view>
			</view>
		</view>
		<view class="bc-info">
			<view class="info-item">
				<text>充值金额（元）</text>
				<input type="text" placeholder="请输入" style="font-size: 13px;color: #D62222;" class="bc-info-right" v-model="rechargeAmount" />
			</view>
			<view class="info-item">
				<text>汇款人姓名</text>
				<input type="text" placeholder="请输入" class="bc-info-right" v-model="recgargeName" style="color: #333;" />
			</view>
			<view class="info-payment">
				<view class="info-title">上传付款凭证</view>
				<view class="info-payment-wrapper">
					<view class="fk_img">
						<view class="evaluate-c-b">
							<view class="goods-img-item" v-for="(item, key) in images" :key="key">
								<image class="del" src="../../../static/images/shanchu.png" mode="" @click="delImage(item)"></image>
								<image class="" :src="item.url" mode="" @click="clickImg(item.url)"></image>
							</view>
							<view class="upload-img" v-show="isImage" @click="upImage">
								<image class="icon" src="../../../static/images/updat_img.png" mode="" style="width: 100%;height: 100%;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="bc-buttom" v-if="backResSuss">我已充值</view>
			<view class="bc-buttom" @click="submit()" v-else>充值</view>
			<view style="text-align: center;font-weight: bold;z-index: 99999;color: #999999;margin-bottom: 100px;" @click="hanldBankList()">充值记录</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeNumber: "4232 1993 9420 9224 912",
				backResSuss: false,
				imgList: [],
				account_list: "",
				images: [], //图片
				image_max: 1, //用于前台判断上传图片按钮是否显示
				refund_input_noedit: true,
				mode: 'aspectFill',
				myArr: [],
				current: 0,
				recgargeName: "", //姓名
				rechargeAmount: "", //充值金额
				card_name: "",
				card_no:"",
				card_subbranch:""
			}
		},
		computed: {
			isImage() {
				let num = this.image_max - this.images.length;
				if (num > 0) {
					return true;
				} else {
					return false;
				}
			}
		},
		onLoad(){
			this.getCigfont()
		},
		methods: {
			getCigfont(){
				let that = this;
				this.$api.shopConfig(res => {
					console.log(res)
					that.card_name = res.card_name;
					that.card_no  = res.card_no+'';
					that.card_subbranch = res.card_subbranch
				})
			},
			pasteName(item){
				console.log(item)
				uni.setClipboardData({
					data: item
				});
			},
			hanldBankList(){
				uni.navigateTo({
					url: 'bankcardList'
				});
			},
					//复制
					paste(value) {
						uni.setClipboardData({
							data: value
						});
						console.log(value)
					},

					//导航点击
					onNavigationBarButtonTap(e) {
						console.log("点击了自定义按钮");
						console.log(e.index); //按钮的id，根据定义的顺序0,1,2

						if (e.index == 0) {
							uni.navigateTo({
								url: 'bankcardList'
							});
						}
					},


					//上传图片
					upImage() {
						let num = this.image_max - this.images.length;
						if (num > 0) {
							this.$api.uploadImage(num, res => {
								if (res.status) {
									console.log(res.data)
									this.images.push(res.data);
									console.log(this.images)
									// this.images = Object.keys(res.data.url)
									this.$common.successToShow(res.msg);
								} else {
									this.$common.errorToShow(res.msg);
								}
							});
						}
					},

					//删除图片
					delImage(e) {
						let newImages = [];
						for (var i = 0; i < this.images.length; i++) {
							if (this.images[i].image_id != e.image_id) {
								newImages.push(this.images[i]);
							}
						}
						this.images = newImages;
					},

					//提交
					submit(e) {
						if (!this.recgargeName) {
							this.$common.errorToShow('请填写姓名');
							return false
						}
						if (this.images.length==0) {
							this.$common.errorToShow('请上传图片');
							return false
						}


						var str = "";
						for (var i = 0; i < this.images.length; i++) {
							str += this.images[i].url + ",";
						}
						//去掉最后一个逗号(如果不需要去掉，就不用写)
						if (str.length > 0) {
							str = str.substr(0, str.length - 1);
						}
						console.log(str);


						//组装数据，提交数据
						let data = {
							name: this.recgargeName, //用户名
							image: str,
							money: this.rechargeAmount, //充值金额
						};
						
						this.$api.carRecharge(data, res => {
							if (res.status) {
								this.$common.successToShow('提交成功', function() {
									uni.navigateTo({
										url: 'bankSuccess'
									});
								});
							} else {
								this.$common.errorToShow(res.msg);
							}
						});
					},

				}
			}
</script>

<style scoped>
	.bankcardRe {
		margin-bottom: 5px;
	}

	.bankcardRe-wrapper {
		height: 156px;
		background-color: #D62222;
		position: relative;
	}

	.bc-company {
		position: absolute;

		width: 100%;
	}

	.bc-bg {
		display: flex;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx;
		margin: 31px 16px 10px 16px;
		flex-direction: column;
		padding: 20px 14px 20px 14px;
	}

	.bc-title {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
		padding-bottom: 39px;
	}

	.bc-number {
		font-size: 21px;
		color: #333333;
		padding-bottom: 26px;
		font-weight: bold;
		position: relative;
	}

	@media only screen and (device-width: 320px) {
		.bc-title {
			font-size: 13px !important;
		}

		.bc-number {
			font-size: 18px !important;
		}

		.bc-address {
			font-size: 12px !important;
		}

		.bc-copy {
			top: 4px !important;
		}
	}

	.bc-address {
		font-size: 13px;
		color: #999999;
	}

	.bc-copy {
		right: 0px;
		position: absolute;
		width: 36px;
		height: 18px;
		background: rgba(254, 77, 0, 0.1);
		border-radius: 9px;
		top: 8upx;
		border: 1px solid rgba(254, 77, 0, 1);
		font-weight: normal;
	}

	.bc-copy text {
		transform: scale(0.9);
		font-size: 10px;
		display: block;
		text-align: center;
		color: #FE4D00;
		line-height: 32upx;
	}

	.bc-info {
		margin-top: 66px;
		height: 850upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		margin-left: 14px;
		margin-right: 14px;
		padding: 0px 14px 18px 14px;
		font-size: 13px;
		color: #333333;
	}

	.info-item {
		height: 48px;
		border-bottom: 1px solid #F5F5F5;
		line-height: 48px;
	}

	/**/
	.info-payment {
		background-color: #fff;
		border-radius: 10px;
	}

	.info-payment-wrapper {
		display: flex;
		flex-direction: row;
		padding: 10px 0;
	}

	.info-payment-img {
		padding-right: 10px;
		height: 100px;
		width: 110px;
	}

	.info-payment-img image {
		width: 100%;
		height: 100%;
	}

	.info-title {
		padding: 10px 0;
	}

	.info-bottom {
		height: 80px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-items: right;
		justify-content: flex-end;
		align-items: center;
	}

	.info-bottom2 {
		height: 80px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-items: right;
		justify-content: flex-end;
		align-items: center;
		z-index: 999999;
	}

	.info-no-pass {
		height: 35px;
		margin: 0 20px;
		background-color: #D8D8D8;
		border-radius: 20px;
		text-align: center;
		line-height: 35px;
		color: #969993;
		margin-right: 10px;
	}

	.info-pass {
		height: 40px;
		background-color: #F83600;
		border-radius: 20px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		margin: 0 20px;
	}

	.info-img {
		height: 120px;
		width: 120px;
		margin: auto;
	}

	.info-img image {
		width: 100%;
		height: 100%;
	}

	.info-text {
		font-size: 13px;
		text-align: center;
		color: #969993;
		padding: 20px 0;
	}

	.info-pass-rapper {
		width: 100%;
	}

	/*上传图片*/
	.question {
		width: 100%;
		min-height: 100%;
	}

	.card-content {
		padding: 10px 0 !important;
	}

	/* .question .mu-raised-button{ margin: 10px 10%; width: 80%;} */
	.question a {
		background: none;
		box-shadow: none;
		border: 1px solid rgba(17, 11, 21, 1);
		color: #110B15;
	}

	.update {
		width: 100%;
		/* height: 100%; */
	}

	.update .name {
		width: 100%;
		padding: 15px 0;
	}

	.update .name input {
		width: 100%;
		border: 0;
		height: 48px;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		outline: none;
		padding: 0 15px;
	}

	.update .info {
		width: 100%;
		padding: 0 15px;
	}

	.update .info p {
		font-size: 12px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(120, 120, 120, 1);
	}

	.btn_info {
		text-align: center;
		margin-top: 50px;
	}

	.update .info .btn {
		width: 309px;
	}

	.line_brief {
		background: #fff;
		border-radius: 5px;
		border: 1px solid rgba(230, 230, 230, 1);
		padding-bottom: 8px !important;
	}

	.question_list {
		position: fixed;
		top: 34px;
		z-index: 100012;
		right: 15px;
	}

	.question_list p {
		font-size: 14px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(254, 73, 70, 1);
	}

	.fk_img {
		width: 100%;
		padding: 0 15px;
		display: flex;
	}

	.up_img {
		width: 70px;
		height: auto;
		text-align: center;
		position: relative;
	}

	.up_img image {
		width: 70px;
		height: 70px;
	}

	.up_img input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.up_img .text {
		font-size: 14px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(120, 120, 120, 1);
	}

	.list_img .info {
		margin-left: 8px;
	}

	.list_img .info image {
		width: 70px;
		height: 70px;
	}

	.footer_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0;
		height: 48px;
		border-radius: 0;
		background: linear-gradient(90deg, rgba(159, 205, 164, 1) 0%, rgba(54, 157, 65, 1) 100%);
	}

	.list_img {
		display: flex;
		flex-wrap: wrap;
	}

	.evaluate-c-b {
		width: 100%;
	}

	.upload-img {
		width: 206px;
		height: 159px;
		text-align: center;
		color: #999999;
		font-size: 11px;
		border-radius: 2px;
		margin: 0 auto;
		text-align: center;
	}

	.goods-img-item {
		width: 206px;
		height: 159px;
		margin: auto;
		position: relative;
	}

	.goods-img-item:nth-child(4n) {
		margin-right: 0;
	}

	.goods-img-item image {
		width: 100%;
		height: 100%;
	}

	.del {
		width: 62upx !important;
		height: 66upx !important;
		position: absolute;
		right: -10px;
		top: 0;
		z-index: 999;
	}

	.bc-info-right {
		float: right;
		height: 100%;
		color: #C7C7C7;
		font-size: 13px;
		text-align: right;
	}

	.bankcardRe .uni-input-placeholder {
		color: #C7C7C7;
	}

	.bc-buttom {
		height: 41px;
		background: rgba(214, 34, 34, 1);
		border-radius: 23px;
		text-align: center;
		font-size: 15px;
		color: rgba(255, 255, 255, 1);
		line-height: 41px;
		margin: 10px 0px 19px 0px;
	}
</style>
